<script setup lang="ts">
const showMenu = ref(false);
const { login, register } = useDailog();
const { user } = useAuth();

const handleToggleShowMenu = () => {
  showMenu.value = !showMenu.value;
};
</script>

<template>
  <header class="p-3 flex justify-between items-center relative">
    <NuxtLink to="/" class="flex justify-start items-center gap-x-2">
      <div
        class="w-8 h-8 p-0.5 overflow-hidden rounded-full border border-cyan-700 shadow-md bg-white/70 text-cyan-700"
      >
        <Icon name="uil:link-broken" size="1.5rem" />
      </div>
      <h2 class="text-xl">短链接</h2>
    </NuxtLink>

    <div class="block lg:hidden">
      <button @click="handleToggleShowMenu">
        <Icon size="1.25rem" name="uil:align-justify" />
      </button>
    </div>

    <ul
      class="justify-end items-center gap-x-4 flex flex-col absolute right-1 top-10 bg-white/90 w-28 p-2 gap-y-2 z-[1] shadow-md rounded transition-all lg:flex-row lg:static lg:bg-transparent lg:p-0 lg:gap-y-0 lg:shadow-none lg:rounded-none lg:transition-none lg:w-auto"
      :class="{
        'visible opacity-100 lg:visible lg:opacity-100': showMenu,
        'invisible opacity-0 lg:visible lg:opacity-100': !showMenu,
      }"
    >
      <li>
        <NuxtLink class="flex justify-start items-center gap-x-1" to="/">
          <div><Icon name="uil:home" /></div>
          <div>首页</div>
        </NuxtLink>
      </li>
      <li v-if="!user">
        <NuxtLink
          to="/auth/user-login"
          class="flex justify-start items-center gap-x-1 w-full"
        >
          <div><Icon name="uil:user" /></div>
          <div>登录</div>
        </NuxtLink>
      </li>
      <li v-if="!user">
        <NuxtLink
          to="/auth/user-register"
          class="flex justify-start items-center gap-x-1 bg-blue-600 text-white rounded-md px-3 py-1 w-full"
          @click="register = true"
        >
          <div><Icon name="uil:user-plus" size="1.25rem" /></div>
          <div>注册</div>
        </NuxtLink>
      </li>
      <!--已登录-->
      <li v-if="user">
        <NuxtLink class="flex justify-start items-center gap-x-1" to="/user">
          <div><Icon name="uil:flower" /></div>
          <div>我的</div>
        </NuxtLink>
      </li>

      <li>
        <a
          class="flex justify-start items-center gap-x-1"
          href="https://gitgud.io/china/short-url"
          target="_blank"
        >
          <div><Icon name="uil:code-branch" /></div>
          <div>源码</div>
        </a>
      </li>
    </ul>
  </header>
</template>
